<template>
  <div style="margin-top: 60px;margin-left:80px;border: 0px solid red;">
    <!-- 返回按钮 -->
    <el-button
        style="float: left"
        type="success"
        @click="cancel()">返回</el-button>
    <!-- 添加履历按钮 -->
    <el-button
        style="float: left"
        type="success"
        @click="add()">添加履历</el-button>
    <!-- 表格 -->
    <el-table
        :data="tableData"
        stripe
        style="width: 100%;position: relative;top:10px">
      <!-- ID 列 -->
      <el-table-column
          fixed
          prop="id"
          label="ID"
          width="130"
          align="center">
      </el-table-column>

      <!-- 时间点 列 -->
      <el-table-column
          prop="datePoint"
          label="时间点"
          width="130"
          align="center">
      </el-table-column>

      <!-- 标题 列 -->
      <el-table-column
          prop="title"
          label="标题"
          width="130"
          align="center">
      </el-table-column>

      <!-- 内容介绍 列 -->
      <el-table-column
          prop="content"
          label="内容介绍"
          width="300"
          align="center">
      </el-table-column>

      <!-- 更新时间 列 -->
      <el-table-column
          prop="updatetime"
          label="更新时间"
          width="130"
          align="center">
      </el-table-column>

      <!-- 更新者ID 列 -->
      <el-table-column
          prop="userid"
          label="更新者ID"
          width="130"
          align="center">

      </el-table-column>

      <!-- 操作 列 -->
      <el-table-column label="操作">
        <template #default="{row}">
          <!-- 编辑按钮 -->
          <el-button
              size="small"
              type="warning"
              @click="edit(row)">编辑
          </el-button>
          <!-- 删除按钮 -->
          <el-button
              size="small"
              type="danger"
              @click="del(row)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination style="margin-top: 20px;float: left"
                   background
                   layout="prev, pager, next"
                   :page-size="pageSize"
                   :total="total"
                   v-model:current-page="currentPage"
                   @current-change="page">
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: null,
      currentPage: 1,
      pageSize: 5,
      total: null,
      key: '',
      value: '',
      ruleForm: {
        key: '',
        value: '',
        page: '',
        size: 5
      },
      rules: {
        key: [
          { required: true, message: '请选择字段', trigger: 'change' }
        ]
      }
    }
  },
  methods:{
    // 提交表单
    submitForm(formName) {
      const _this = this
      // 将currentPage的值重置，使得每次进行search以后都从第一页开始
      _this.currentPage = 1
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const _this = this
          _this.ruleForm.page = _this.currentPage
          this.$http.get('http://localhost:8081/event/search',{params:_this.ruleForm}).then(function (resp) {
            _this.tableData = resp.data.data.data
            _this.total = resp.data.data.total
          })
        }
      });
    },
    // 分页
    page(currentPage){
      const _this = this
      // 判断是否处于查询状态，即：关键字内是否有值，若有值则展示与值对应的信息，若没有则展示全部信息，
      // 若不添加这个判断，则第二页的内容是list中的内容而不是search的内容
      if(_this.ruleForm.value == ''){
        this.$http.get('http://localhost:8081/event/list/' + _this.$route.query.id + '/'+currentPage+'/'+_this.pageSize).then(function (resp) {
          _this.tableData = resp.data.data.data
          _this.total = resp.data.data.total
        })
      }
    },
    // 编辑
    edit(row){
      this.$router.push('/eventUpdate?id='+row.id)
    },
    // 返回
    cancel(){
      this.$router.push('/peopleManager')
    },
    // 添加履历
    add(){
      this.$router.push('/eventAdd?genealogyId='+this.$route.query.id)
    },
    // 删除
    del(row) {
      const _this = this
      this.$confirm('确认删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http.delete('http://localhost:8081/event/deleteById/'+row.id).then(function (resp) {
          if(resp.data.code==0){
            _this.$alert('【' + row.id + '】已删除', '', {
              confirmButtonText: '确定',
              callback: () => {
                location.reload()
              }
            });
          }
        });
      });
    }
  },
  created() {
    const _this = this
    // 初始化加载表格数据
    this.$http.get('http://localhost:8081/event/list/' + _this.$route.query.id + '/1/'+_this.pageSize).then(function (resp) {
      _this.tableData = resp.data.data.data
      _this.total = resp.data.data.total
    })
  }
}
</script>